<template>
    <div class="login">
        <div class='warp'></div>
        <div class="main">
            <div class="login-logo">
                <img src="https://goods.dingdian.xin/FvO0spJd08pXa7apSnuUrEAxLarC" alt="">
                <p>八点半爆品后台管理</p>
            </div>
            <div class="form">
                <el-input v-model="username" placeholder="请输入手机号" clearable></el-input>
                <el-input v-model="password" type="password" @keyup.enter.native="onSubmit" placeholder="请输入密码" clearable></el-input>
                <el-button size="medium" type="primary" @click="onSubmit">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { login } from "../data/postData";
import axios from "axios";
export default {
    mounted() {
        this.checkSession();
        
    },
    data() {
        return {
            username: "",
            password: ""
        };
    },
    methods: {
        checkSession() {
            let user = sessionStorage.getItem("ddaigoUser");
            if (user == null || user == "null") {
                this.$router.push({ path: "/login" });
                localStorage.removeItem("ddaigoUser");
            } else {
                user = JSON.parse(user);
                if (user.roleId == 1) {
                    this.$router.push({ path: "/activityList" });
                } else {
                    this.$router.push({ path: "/depotList" });
                }
            }
        },
        onSubmit() {
            if (this.username.trim() === "") {
                this.$message({
                    message: "请输入手机号",
                    type: "warning",
                    duration: 1500
                });
            } else if (
                !this.username.match(
                    /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/
                )
            ) {
                this.$message({
                    message: "请输入正确的手机号",
                    type: "warning",
                    duration: 1500
                });
            } else if (this.password.trim() === "") {
                this.$message({
                    message: "请输入密码",
                    type: "warning",
                    duration: 1500
                });
            } else if (this.password.length < 6) {
                this.$message({
                    message: "请输入六位数级以上的密码",
                    type: "warning",
                    duration: 1500
                });
            } else {
                let params = {
                    data: {
                        name: this.username,
                        password: this.$md5(this.password)
                    }
                };
                this.$fetch.post(login, params).then(res => {
                        console.log(res);

                        localStorage.setItem(
                            "ddaigoUser",
                            JSON.stringify(res.data)
                        );
                        sessionStorage.setItem(
                            "ddaigoUser",
                            JSON.stringify(res.data)
                        );
                        //检测版本环境
                        var url = window.location.host.split(".");
                        if(url[0] == "admin"){
                            localStorage.setItem("environment","生产环境");
                        }else if(url[0] == "ppe"){
                            localStorage.setItem("environment","测试环境");
                        }else{
                            localStorage.setItem("environment","开发环境");
                        }
                        console.log(url)
                        console.log(localStorage.getItem("environment"))

                        let user = localStorage.getItem("ddaigoUser");

                        const service = axios.create({
                            baseURL: process.env.BASE_API // api的base_url
                            // timeout: 5000 // request timeout
                        });
                        axios.defaults.headers.common["sessionId"] =
                            user && user != "null"
                                ? JSON.parse(user).sessionId
                                : "";
                        Vue.prototype.$http = service;

                        if (res.data.roleId == 1) {
                            this.$router.push({ path: "/activityList" });
                        } else {
                            this.$router.push({ path: "/depotList" });
                        }
                        console.log(
                            "---user---",
                            sessionStorage.getItem("ddaigoUser")
                        );
                        console.log(
                            "---user---",
                            localStorage.getItem("ddaigoUser")
                        );
                    })
                    .catch(err => {
                        console.warn(err);
                        this.$message({
                            message: err.message,
                            type: "warning",
                            duration: 1500
                        });
                    });
            }
        }
    }
};
</script>

<style scoped lang="less">
// body{
//   width:100%;
//   height:100%;

// }
.login {
    width: 100%;
    height: 100%;
    background: url(https://goods.dingdian.xin/FtM70lFRekj6kF38usm4V7CAs6wI);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    //filter:alpha(opacity=70);
    opacity: 1;
    > div {
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translate(-50%, 0);
    }
    .warp {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: #999;
        opacity: 0.4;
    }
    .login-logo {
        text-align: center;
        img {
            width: 90px;
        }
        p {
            font-size: 45px;
            color: #fff;
            margin-top: 20px;
        }
    }
    .form {
        width: 100%;
        margin: 0 auto;
        .el-input {
            margin-top: 20px;
        }
        button {
            margin-top: 20px;
            width: 100%;
        }
    }
}
</style>